<template>
    <div class="worType">
        <div class="searchBar" id="spaceManage_searchBar">
            <div class="navBar">
                <ul>
                    <li :class="activeIndex == 0 ? 'active' : ''" @click="changeNav(0)">
                        <span>负责人</span>
                    </li>
                    <li class="userType" :class="activeIndex == 1 ? 'active' : ''" @click="changeNav(1)">
                        <span>签发人</span>
                    </li>
                    <li :class="activeIndex == 2 ? 'active' : ''" @click="changeNav(2)">
                        <span>许可人</span>
                    </li>
                </ul>
            </div>
            <div class="content">
                <div class="searchBar_content" :class="packUp_eq_searchBar ? 'alarmRule_form_packUp' : ''">
                    <div class="left">
                        <el-form class="form" :model="searchData.params" label-position="left">
                            <el-form-item label="姓名/账号">
                                <el-input v-model.trim="searchData.params.name" placeholder="姓名/账号"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item label="部门">
                                <el-input v-model.trim="searchData.params.name" placeholder="部门"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item label="岗位">
                                <el-input v-model="searchData.params.name" placeholder="岗位"></el-input>
                            </el-form-item>
                            <el-form-item label="专业">
                                <el-input v-model="searchData.params.name" placeholder="专业"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-input v-model="searchData.params.name" placeholder="状态"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <template v-if="packUp_eq_searchBar">
                        <div class="right">
                            <div class="btn_bg" title="搜索" @click="searchList">
                                <img class="btn_icon search_icon"
                                    src="@/assets/images/images_new/search_icon.png" alt="">
                            </div>
                            <div class="btn_bg btn_bg2" title="清空" @click="empty">
                                <img class="btn_icon reset_icon"
                                    src="@/assets/images/images_new/reset_icon.png" alt="">
                            </div>
                            <div class="more" @click="changePackUp">
                                <span>更多筛选</span>
                                <img class="packUp_icon" src="@/assets/images/images_new/packUp_icon.png"
                                    alt="">
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="right right2">
                            <div class="right_btn">
                                <div class="btn_bg" title="搜索" @click="searchList">
                                    <img class="btn_icon search_icon"
                                        src="@/assets/images/images_new/search_icon.png" alt="">
                                </div>
                                <div class="btn_bg btn_bg2" title="清空" @click="empty">
                                    <img class="btn_icon reset_icon"
                                        src="@/assets/images/images_new/reset_icon.png" alt="">
                                </div>
                            </div>
                            <div class="more" @click="changePackUp">
                                <span>更多筛选</span>
                                <img class="packUp_icon" src="@/assets/images/images_new/packUp_icon.png"
                                    alt="">
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="content_body">
            <menuTree ref="treeComponent" @getCheckItem="getCheckItem"></menuTree>
            <div class="spaceManage_content">
                <div class="right_content">
                    <workTypeTable ref="tableComponent" :table_height="100" :searchData="searchData"
                        :checkItem="checkItem.ckecked_item" @getTotal="getTotal" @updateList="updateList"
                        @showEnable="showEnable" @showDisable="showDisable" @showAdd="showAdd">
                    </workTypeTable>
                    <!-- 分页组件 -->
                    <div class="common_pagination">
                        <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize"
                            :pageTotal="total" @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
                    </div>
                </div>
                <!-- 新增弹窗 -->
                 <PopupAdd :dialogVisible="viewAdd" @closeDialog="closeDialogAdd"></PopupAdd>
                 <!-- 启动弹窗 禁用弹窗 -->
                <PopupEnable :dialogVisible="viewEnable" :type_dialog="type_dialog" @closeDialog="closeDialogEnable"></PopupEnable>
                 <!-- 导入弹窗 -->
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import menuTree from './components/menuTree.vue';
import workTypeTable from "./components/table.vue";
import PopupEnable from './components/PopupEnable.vue';
import PopupAdd from './components/PopupAdd.vue';
import { useMain, store } from "@/store/index";
import { storeToRefs } from 'pinia';

const tableComponent = ref<any>(null); //获取table组件
const treeComponent = ref<any>(null); //获取tree组件
let viewEnable = ref(false); //是否打开启用弹窗
let viewAdd = ref(false); //是否打开启用弹窗

const searchData = reactive({
    pageNum: 1, //当前页
    pageSize: 10, //每页条目数
    params: {
        id: "", //空间Id
        name: "", //空间名称
        number: "", //编号
        spaceTypeId: "", //空间分类id
    }
})
const activeIndex = ref(0)
const changeNav = (val: number) => {
    activeIndex.value = val;
    if (val == 0) {
        // spaceListRef.value.getData();
    } else if (val == 1) {
        // useTypeRef.value.getData();
    } else if (val == 2) {
        // spaceStateRef.value.getData();
    }
}

const useMainStore = useMain(store);//pinia
//storeToRefs 保持响应式 packUp_eq_searchBar 通用设备搜索栏是否收起 packUp_gateway 网关设备搜索栏是否收起
let { packUp_eq_searchBar } = storeToRefs(useMainStore);
//点击收起按钮
const changePackUp = () => {
    useMainStore.updatedpackUpEqSearchBar(!packUp_eq_searchBar.value);

}

//搜索
const searchList = () => {

}

//清空
const empty = () => {
 
}



//页数改变事件(上一页,下一页,跳转到某一页)
const pageFunc = (pageNum: number) => {
    searchData.pageNum = pageNum;
    //更新右侧表格列表
    if (tableComponent.value) {
        tableComponent.value.getList();
    }
}

//每页条数改变
const sizeChange = (pageSize: number) => {
    searchData.pageSize = pageSize;
    tableComponent.value?.getList();
}

let checkItem = reactive({
    ckecked_item: {} as any //左侧树形结构选中的项
})

//获取左侧树形结构选中的项
const getCheckItem = (ckecked_item: any) => {
    // console.log('161ckecked_item', ckecked_item);
    if (checkItem.ckecked_item.id != ckecked_item.id) {
        checkItem.ckecked_item = ckecked_item;
        searchData.params.id = ckecked_item.id;
        searchData.params.name = "";
        searchData.params.number = "";
        searchData.params.spaceTypeId = "";
        updateTableList(); //更新右侧表格列表
    }


}

//更新列表
const updateList = () => {
  //更新左侧树形结构
  if (treeComponent.value) {
    treeComponent.value.getTreeList();
  }
  updateTableList(); //更新右侧表格列表
}


let total = ref(0);

//获取总条数
const getTotal = (num: number) => {
    total.value = num;
}


//弹窗类型 Enable 启用 Disable 停用
const type_dialog = ref('');

// 打开启用弹窗
const showEnable = () => {
    viewEnable.value = true;
    type_dialog.value = 'Enable'
}

// 关闭启用弹窗
const closeDialogEnable = () => {
    viewEnable.value = false;
}

// 打开停用弹窗
const showDisable = () => {
    viewEnable.value = true;
    type_dialog.value = 'Disable'
}
// 打开新增弹窗
const showAdd = () => {
    viewAdd.value = true;
}
// 关闭新增弹窗
const closeDialogAdd = () => {
    viewAdd.value = false;
}
</script>

<style lang="scss" scoped>
.worType {
    padding: 0 15px;
    background-color: #e5e5e5;
    height: 100%;
    display: flex;
    flex-direction: column;

    .searchBar {
        // height: 146px;
        background-color: #fff;
        padding: 28px 28px 0px 30px;
        border-radius: 0px 0px 8px 8px;

        .navBar {
            ul {
                // width: 320px;
                display: flex;
                // border: 1px solid rgb(229, 229, 229);

                li {
                    width: 160px;
                    height: 38px;
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 36px;
                    // color: rgba(0, 0, 0, 1);
                    color: rgb(112, 105, 95);
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    border-top: 1px solid rgb(229, 229, 229);
                    border-bottom: 1px solid rgb(229, 229, 229);

                    // border-right: 1px solid rgb(229, 229, 229);
                    &:first-child {
                        border-left: 1px solid rgb(229, 229, 229);
                    }

                    &:last-child {
                        border-right: 1px solid rgb(229, 229, 229);
                    }

                    &.userType {
                        border-left: 1px solid rgb(229, 229, 229);
                        border-right: 1px solid rgb(229, 229, 229);
                    }

                    &.active {
                        width: 160px;
                        font-size: 16px;
                        line-height: 36px;
                        color: rgba(0, 0, 0, 1);
                        background: rgb(229, 229, 229);
                        // border: 1px solid rgba(0, 0, 0, 0);

                    }
                }

            }
        }

        .content {
            .searchBar_content {
                display: flex;
                padding: 26px 5px 0px 0px;
                height: 137px;
                transition: all 0.2s linear;
                overflow: hidden;

                &.alarmRule_form_packUp {
                    height: 80px;

                    .left {
                        .el-form {
                            .el-form-item {
                                max-width: 33%;
                                padding-right: 35px;
                            }
                        }
                    }

                }


                .left {
                    flex: 1;

                    .el-form {
                        display: flex;
                        flex-wrap: wrap;
                        align-content: space-between;



                        .el-form-item {
                            align-items: center;
                            max-width: 25%;
                            padding-right: 25px;
                            margin-bottom: 25px;
                            height: 32px;

                            // &:nth-child(n+4) {
                            //     margin-bottom: 20px;
                            // }

                            &.text_letter {
                                word-spacing: 25px;
                            }

                            :deep(.el-form-item__label) {
                                width: 84px;
                                text-align: right;
                                justify-content: flex-end;
                            }

                            :deep(.select-trigger) {
                                .el-input {
                                    width: 100%;
                                }
                            }

                            :deep(.el-cascader) {
                                width: 260px;

                                .el-input {
                                    width: 100%;
                                }
                            }
                        }
                    }

                }

                .right {
                    width: 184px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    justify-content: flex-start;
                    color: rgb(112, 105, 95);

                    .btn_bg {
                        height: 35px;
                        width: 35px;
                        flex-shrink: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;

                        &:hover {
                            background: rgba(0, 0, 0, 0.1);
                            border-radius: 2px;
                        }

                        &.btn_bg2 {
                            margin: 0 21px 0 17px;
                        }

                        .search_icon {
                            width: 21px;
                            cursor: pointer;
                        }

                        .reset_icon {
                            width: 20px;
                            cursor: pointer;
                        }
                    }



                    .packUp_icon {
                        width: 12px;
                        margin-left: 8px;
                    }

                    .more {
                        cursor: pointer;
                    }
                }

                .right2 {
                    width: 80px;
                    display: inline-block;
                    height: auto;

                    .right_btn {
                        height: 32px;
                        display: flex;
                        align-items: center;
                        margin-bottom: 25px;
                        // padding-left: 6px;
                    }

                    .more {
                        line-height: 32px;
                    }

                    .packUp_icon {
                        transform: rotate(-180deg);
                    }
                }
            }
        }

    }

    .content_body {
        display: flex;
        flex: 1;
        overflow: hidden;


        .spaceManage_content {
            width: 100%;
            min-height: 100%;
            position: relative;
            min-width: 0;
            overflow: hidden;
            padding-left: 19px;

            .right_content {
                width: 100%;
                height: 100%;
                position: relative;
                // background-color: #fff;
                // border-radius: 8px;

                .common_pagination {
                    position: absolute;
                    right: 35px;
                    bottom: 40px;
                }
            }



        }
    }

}
</style>